<template>
  <div id="player">
    <!-- <h2 class="title">黑云音乐</h2> -->
    <!-- 轮播图 -->
    <MySwiper></MySwiper>
    <div class="search">
      <input type="text" v-model.trim="search" @keyup.enter="searchMusic" />
      <button @click="searchMusic">
        <span class="iconfont icon-search"></span>
      </button>
    </div>
    <div class="tab-wrapper">
      <!-- tab栏 -->
      <div class="tab-bar">
        <router-link to="/results" class="bar-item" active-class="active">搜索结果</router-link>
        <router-link to="/player" class="bar-item" active-class="active">歌曲播放</router-link>
        <router-link to="/video" class="bar-item" active-class="active">mv</router-link>
        <router-link to="/comment" class="bar-item" active-class="active">歌曲评论</router-link>
        <router-link to="/recommend" class="bar-item" active-class="active">推荐歌曲</router-link>
      </div>
      <!-- 对应的内容区域 -->
      <div class="tab-content"></div>
    </div>
  </div>
</template>

<script>
import MySwiper from './MySwiper.vue'
export default {
  components: {
    MySwiper
  },
  data() {
    return{
      search: "",
    }
    },
    methods: {
      searchMusic() {
        this.$router.push("/results/" + this.search)
        window.localStorage.setItem("search", this.search)
      },
    },
};
</script>

<style scoped>
/* 这里的 @ 符号代表的当前项目的 src 路径，路径别名 */
@import "@/assets/css/index.css";
</style>